<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中组件使用中的细节点</title>
    <script src="../vue.js"></script>
   
</head>
<body>
    <div id="app">  
            <!--
            1. table  ul ol  select  组件使用 is   属性  
            2.  在子组件中定义data 的时候 ，data那必须是一个函数，而不能是一个对象
            之所以这样设计 是因为 子组件不想根组件可以调用一次  ，让每一个子组件都拥有一个独立的数据存储
            不会出现多个组件互相影响的情况
            3.  ref  获取dom  节点
            -->
            <!-- 1. -->
        <table>
            <tbody>
                <!-- <row></row>
                <row></row>
                <row></row> -->
                <tr is ="row"></tr>
                <tr is ="row"></tr>
                <tr is ="row"></tr>
            </tbody>
        </table>
        </div>

        <!--   3 -->
        <div id="root">
            <div
                ref ='hello'
                @click='handleClick'
            >
                hello world
            </div>
        </div>

        <!--   
            组件  ref  实例 
          -->
          <div id="components">
              <counter ref="one" @change="handleChange"></counter>
              <counter ref="one" @change="handleChange"></counter>
              <div>{{total}}</div>
          </div>

    
    <script>
        // 在子组件中定义data data必须是一个函数
        Vue.component('row', {
            data: function(){
                  return {
                        content:' this is content'
                  }  
            },
            template:'<tr><td>{{content}}</td></tr>'
        })
       
        var vm = new Vue({
           el: '#app',
        });
       
//       ref  例子
        var root = new Vue({
            el: '#root',
            methods: {
                handleClick: function(){
                    console.log(this.$refs.hello);
                }
            }
        });

        //       ref  例子

        Vue.component('counter', {
            template:"<div @click='handleClick'>{{number}}</div>",
            data: function(){
                  return {
                        number: 0
                  }  
            },
            methods: {
                handleClick: function(){
                   this.number ++;
                   this.$emit('change');
                }
            }
           
        })
        var root = new Vue({
            el: '#components',
            data: {
                total: 0
            },
            methods: {
                handleChange: function(){
                   this.total = this.$refs.one.number + this.$refs.two.number
                }
            }
        });
    </script>
</body>
</html>